<template>
  <div class="purchase-list-layout">
    <crumbList :navList="navList"></crumbList>
    <div class="set-admin-table">
      <div class="purchase-item mb0">
        <el-form ref="searchData" :model="searchData" class="clearfix">
          <el-form-item v-if="btnState[0].active">
            <el-select v-model="searchData.productName" placeholder="产品名称">
              <el-option :label="item.productName" :value="item.productName" v-for="(item,index) in productMsg"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="btnState[1].active">
            <el-select v-model="searchData.cityName" placeholder="城市名称" class="w280">
              <el-option :label="item.cityName" :value="item.cityName" v-for="(item,index) in cityMsg"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="btnState[2].active">
            <el-select v-model="searchData.factoryName" placeholder="厂商名称" class="w280">
              <el-option :label="item.factoryName" :key="index" :value="item.factoryName"
                         v-for="(item,index) in factoryMsg"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="btnState[3].active">
            <el-select v-model="searchData.repairReason" placeholder="报修原因" class="w280">
              <el-option :label="item.repairReason" :key="index" :value="item.repairReason"
                         v-for="(item,index) in repairMsg"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="itemTime">
            <el-date-picker type="daterange" placeholder="添加时间" v-model="searchData.choseTime"></el-date-picker>
          </el-form-item>
          <div class="new-build-change fl clearfix">
            <el-form-item class="fl btnLayout clearfix">
              <el-button class="btnChange fl" :key="index" :class="{'clickBag':item.active}"
                         v-for="(item,index) in btnState" @click="btnClick(index)">{{item.txt}}
              </el-button>
            </el-form-item>
            <el-form-item class="itemButton itemButton2">
              <el-button type="primary" @click="submitSearch">查询</el-button>
              <el-button type="primary" @click="resetItem">重置</el-button>
              <el-button type="primary" class="addItem" @click="addItem">新增</el-button>
              <a :href="exportExcel">
                <el-button type="primary" class="addItem" @click="exportItem">导出</el-button>
              </a>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="purchase-table-list">
        <el-table :data="tableData" border>
          <el-table-column :label="item.label" v-for="(item,index) in tableItem" :key="index"
                           :width="item.name==='orderNum'?64:''" v-if="item.name!=='edit'">
            <template scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{item.label}}: {{ scope.row[item.name]}}</p>
                <div slot="reference">
                  <el-tag>{{ scope.row[item.name] }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template scope="scope">
              <el-button type="primary" class="editBtn" @click="handleChange(scope.$index, scope.row)">编辑</el-button>
              <el-button type="primary" class="editBtn" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination layout="total, prev, pager, next, jumper"
                       @current-change="handleCurrentChange"
                       :current-page="page.pageNum"
                       :page-size="page.pageSize"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
    <!--详情弹窗-->
    <el-dialog title="新增" v-model="dialogVisible">
      <el-form :model="newAdd" label-width="110px" class="demo-ruleForm">
        <el-form-item label="厂商名称" v-if="btnState[0].active">
          <el-select v-model="newAdd.factoryName" placeholder="请输入" class="w400">
            <el-option :label="item.factoryName" :key="index" :value="item.factoryName"
                       v-for="(item,index) in factoryMsg"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="厂商名称" v-if="btnState[2].active">
          <el-input v-model="newAdd.factoryName" placeholder="请输入" class="w400"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" v-if="btnState[0].active">
          <el-input v-model="newAdd.productName" placeholder="请输入" class="w400"></el-input>
        </el-form-item>
        <el-form-item label="产品类型" v-if="btnState[0].active">
          <el-input v-model="newAdd.productType" placeholder="请输入" class="w400"></el-input>
        </el-form-item>
        <el-form-item label="城市名称" v-if="btnState[1].active">
          <el-input v-model="newAdd.cityName" placeholder="请输入" class="w400"></el-input>
        </el-form-item>
        <el-form-item label="分支名称" v-if="btnState[1].active">
          <el-input v-model="newAdd.branchName" placeholder="请输入" class="w400"></el-input>
        </el-form-item>
        <el-form-item label="是否有分支" v-if="btnState[1].active">
          <el-select v-model="newAdd.cityBranch" placeholder="请选择" class="w400">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报修原因" v-if="btnState[3].active">
          <el-input v-model="newAdd.repairReason" placeholder="请输入" class="w400"></el-input>
        </el-form-item>
        <el-form-item class="new-add-submit">
          <el-button class="new-btn-no buleSpaceBtn" @click="closeDialog">取消</el-button>
          <el-button class="new-btn-ok buleBtn" @click="addNewData">完成</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import crumbList from '../../common/crumbList.vue'
  import projectSearch from '../../common/projectSerch.vue'
  import ajax from '../../../utils/ajax/index'
  import resetDate from '../../../utils/date/resetDate'

  export default {
    data () {
      return {
        cityMsg: '',
        factoryMsg: '',
        productMsg: '',
        repairMsg: '',
        navList: [
          {name: '系统管理', path: ''},
          {name: '信息管理', path: 'messageManage'},
          {name: '产品名称', path: ''}
        ],
        btnState: [
          {active: false, txt: '产品名称'},
          {active: false, txt: '城市名称'},
          {active: false, txt: '厂商名称'},
          {active: false, txt: '报修原因'}
        ],
        searchData: {
          productName: '',
          cityName: '',
          factoryName: '',
          repairReason: '',
          choseTime: ''
        },
        tableData: [],
        tableItem: [],
        tableDataObj: [
          {
            tableData: [],
            tableItem: [
              {label: '编辑', name: 'edit'},
              {label: '序号', name: 'orderNum'},
              {label: '厂商名称', name: 'factoryName'},
              {label: '产品名称', name: 'productName'},
              {label: '产品类型', name: 'productType'},
              {label: '添加时间', name: 'saveTime'}
            ]
          },
          {
            tableData: [],
            tableItem: [
              {label: '编辑', name: 'edit'},
              {label: '序号', name: 'orderNum'},
              {label: '城市名称', name: 'cityName'},
              {label: '是否有分支', name: 'cityBranch'},
              {label: '分支名称', name: 'branchName'},
              {label: '添加时间', name: 'saveTime'}
            ]
          },
          {
            tableData: [],
            tableItem: [
              {label: '编辑', name: 'edit'},
              {label: '序号', name: 'orderNum'},
              {label: '厂商名称', name: 'factoryName'},
              {label: '添加时间', name: 'saveTime'}
            ]
          },
          {
            tableData: [],
            tableItem: [
              {label: '编辑', name: 'edit'},
              {label: '序号', name: 'orderNum'},
              {label: '报修原因', name: 'repairReason'},
              {label: '添加时间', name: 'saveTime'}
            ]
          }
        ],
        pageObj: [{}, {}, {}, {}],
        page: {
          pageNum: 1,
          pageSize: 1,
          total: 1,
          pages: 1,
          size: 1
        },
        dialogVisible: false,
        newAdd: {
          factoryName: '',
          productName: '',
          productType: '',
          cityName: '',
          cityBranch: '',
          branchName: '',
          repairReason: ''
        },
        exportExcel: ''
      }
    },
    components: {crumbList, projectSearch},
    created () {
      this.btnState[0].active = true
      this.getDataInit()
    },
    methods: {
      getData (url, callback) {
        ajax.get(url, {}).then((res) => {
          if (res.msg.code === '20000') {
            callback(res.data)
          } else {
            this.$message.error(res.msg.message)
          }
        })
      },
      getDataInit () {
        let productUrl = this.api2.product.info
        this.getData(productUrl, (res) => {
          this.pageObj[0] = res.page
          this.productMsg = res.list
          for (let i = 0; i < this.productMsg.length; i++) {
            this.productMsg[i].edit = true
            this.productMsg[i].orderNum = i + 1
          }
          this.tableDataObj[0].tableData = this.productMsg
          this.getFormMes()
        })
        let cityUrl = this.api2.city.info
        this.getData(cityUrl, (res) => {
          this.pageObj[1] = res.page
          this.cityMsg = res.list
          for (let i = 0; i < this.cityMsg.length; i++) {
            this.cityMsg[i].edit = true
            this.cityMsg[i].orderNum = i + 1
          }
          this.tableDataObj[1].tableData = this.cityMsg
          this.getFormMes()
        })
        let factoryUrl = this.api2.factory.info
        this.getData(factoryUrl, (res) => {
          this.pageObj[2] = res.page
          this.factoryMsg = res.list
          for (let i = 0; i < this.factoryMsg.length; i++) {
            this.factoryMsg[i].edit = true
            this.factoryMsg[i].orderNum = i + 1
          }
          this.tableDataObj[2].tableData = this.factoryMsg
          this.getFormMes()
        })
        let repairUrl = this.api2.repair.info
        this.getData(repairUrl, (res) => {
          this.pageObj[3] = res.page
          this.repairMsg = res.list
          for (let i = 0; i < this.repairMsg.length; i++) {
            this.repairMsg[i].edit = true
            this.repairMsg[i].orderNum = i + 1
          }
          this.tableDataObj[3].tableData = this.repairMsg
          this.getFormMes()
        })
      },
      getFormMes () {
        for (let i = 0; i < this.btnState.length; i++) {
          if (this.btnState[i].active) {
            this.tableItem = this.tableDataObj[i].tableItem
            this.tableData = this.tableDataObj[i].tableData
            this.page = this.pageObj[i]
          }
        }
      },
      // 表格切换
      btnClick (index) {
        for (let i = 0; i < this.btnState.length; i++) {
          this.btnState[i].active = false
          if (i === index) {
            this.btnState[i].active = true
            this.navList[2].name = this.btnState[i].txt
            this.getDataInit()
          }
        }
      },
      submitSearch () {
        let url
        if (this.btnState[0].active) {
          url = this.api2.product.info
        } else if (this.btnState[1].active) {
          url = this.api2.city.info
        } else if (this.btnState[2].active) {
          url = this.api2.factory.info
        } else if (this.btnState[3].active) {
          url = this.api2.repair.info
        }
        this.searchData.saveTime = resetDate(this.searchData.choseTime[0])
        this.searchData.endTime = resetDate(this.searchData.choseTime[1])
        let params = this.searchData
        ajax.get(url, params).then((res) => {
          if (res.msg.code === '20000') {
            let data = res.data
            for (let i = 0; i < data.list.length; i++) {
              data.list[i].edit = true
              data.list[i].orderNum = i + 1
            }
            for (let i = 0; i < this.btnState.length; i++) {
              if (this.btnState[i].active) {
                this.tableDataObj[i].tableData = data.list
                this.pageObj[i] = data.page
                this.tableItem = this.tableDataObj[i].tableItem
                this.tableData = this.tableDataObj[i].tableData
                this.page = this.pageObj[i]
              }
            }
          } else {
            this.$message.error(res.msg.message)
          }
        })
      },
      resetItem () {
        this.searchData = {
          productName: '',
          cityName: '',
          factoryName: '',
          repairReason: '',
          choseTime: ''
        }
        this.getDataInit()
      },
      addItem () {
        this.newAdd = {
          factoryName: '',
          productName: '',
          productType: '',
          cityName: '',
          cityBranch: '',
          branchName: '',
          repairReason: ''
        }
        this.dialogVisible = true
      },
      closeDialog () {
        this.newAdd = {
          factoryName: '',
          productName: '',
          productType: '',
          cityName: '',
          cityBranch: '',
          branchName: '',
          repairReason: ''
        }
        this.dialogVisible = false
        this.handleCurrentChange(this.page.pageNum)
      },
      addNewData () {
        let url
        if (this.btnState[0].active) {
          url = this.api2.product.add
        } else if (this.btnState[1].active) {
          url = this.api2.city.add
        } else if (this.btnState[2].active) {
          url = this.api2.factory.add
        } else if (this.btnState[3].active) {
          url = this.api2.repair.add
        }
        let params = this.newAdd
        let bool = false
        for (var key in params) {
          if (params[key] !== '') {
            bool = true
          }
        }
        if (bool) {
          if (url === this.api2.factory.add && params.factoryName !== '') {
            let factoryUrl = this.api2.factory.info
            this.getData(factoryUrl, (res) => {
              console.log(res.list)
              let bool2 = true
              for (let i = 0; i < res.list.length; i++) {
                if (params.factoryName === res.list[i].factoryName) {
                  this.$message.error('厂商名已存在！')
                  bool2 = false
                }
              }
              if (bool2) {
                ajax.post(url, params).then((res) => {
                  if (res.msg.code === '20000') {
                    this.getDataInit()
                    this.$message({message: res.msg.message, type: 'success'})
                    this.dialogVisible = false
                  } else {
                    this.$message.error(res.msg.message)
                  }
                })
              }
            })
          } else {
            ajax.post(url, params).then((res) => {
              if (res.msg.code === '20000') {
                this.getDataInit()
                this.$message({message: res.msg.message, type: 'success'})
                this.dialogVisible = false
              } else {
                this.$message.error(res.msg.message)
              }
            })
          }
        } else {
          this.$message.error('未填写任何数据，添加失败')
          this.dialogVisible = false
        }
      },
      handleChange (index, row) {
        this.newAdd = row
        this.dialogVisible = true
      },
      handleDelete (index, row) {
        let url
        if (this.btnState[0].active) {
          url = this.api2.product.delete
        } else if (this.btnState[1].active) {
          url = this.api2.city.delete
        } else if (this.btnState[2].active) {
          url = this.api2.factory.delete
        } else if (this.btnState[3].active) {
          url = this.api2.repair.delete
        }
        let params = {
          id: row.id
        }
        ajax.post(url, params).then((res) => {
          if (res.msg.code === '20000') {
            this.$message({message: res.msg.message, type: 'success'})
            this.getDataInit()
          } else {
            this.$message.error(res.msg.message)
          }
        })
      },
      // 导出
      exportItem () {
        let url
        if (this.btnState[0].active) {
          url = this.api2.product.upLoad
        } else if (this.btnState[1].active) {
          url = this.api2.city.upLoad
        } else if (this.btnState[2].active) {
          url = this.api2.factory.upLoad
        } else if (this.btnState[3].active) {
          url = this.api2.repair.upLoad
        }
        this.searchData.saveTime = resetDate(this.searchData.choseTime[0])
        this.searchData.endTime = resetDate(this.searchData.choseTime[1])
        let params = this.searchData
        let str = '?'
        for (var key in params) {
          if (params[key] !== '') {
            str = str + key + '=' + params[key] + '&'
          }
        }
        this.exportExcel = url + str.slice(0, str.length - 1)
      },
      handleCurrentChange (val) {
        let url
        if (this.btnState[0].active) {
          url = this.api2.product.info
        } else if (this.btnState[1].active) {
          url = this.api2.city.info
        } else if (this.btnState[2].active) {
          url = this.api2.factory.info
        } else if (this.btnState[3].active) {
          url = this.api2.repair.info
        }
        this.searchData.saveTime = resetDate(this.searchData.choseTime[0])
        this.searchData.endTime = resetDate(this.searchData.choseTime[1])
        let params = this.searchData
        this.page.pageNum = val
        params.pageNum = val
        ajax.get(url, params).then((res) => {
          if (res.msg.code === '20000') {
            let data = res.data
            for (let i = 0; i < data.list.length; i++) {
              data.list[i].edit = true
              data.list[i].orderNum = i + 1
            }
            for (let i = 0; i < this.btnState.length; i++) {
              if (this.btnState[i].active) {
                this.tableDataObj[i].tableData = data.list
                this.pageObj[i] = data.page
                this.tableItem = this.tableDataObj[i].tableItem
                this.tableData = this.tableDataObj[i].tableData
                this.page = this.pageObj[i]
              }
            }
          } else {
            this.$message.error(res.msg.message)
          }
        })
      }
    }
  }
</script>
